<#macro content>
<input type="hidden" id="TenantId" name="TenantId" value="" />
<div class="loginWraper">
    <div id="loginform" class="loginBox">
        <form class="form form-horizontal" action="/loginDo" method="post">
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <input id="username" name="username" type="text" placeholder="账户" class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <input id="password" name="password" type="password" placeholder="密码" class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input id="verifyCode" name="verifyCode" class="input-text size-L" type="text" placeholder="请输入右侧验证码" style="width:150px;">
                    <img src="/captcha" style="height:41px">
                    <a id="kanbuq" href="javascript:;">看不清，换一张</a>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <label for="online">
                        <input type="checkbox" name="online" id="online" value="">
                        使我保持登录状态</label>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <button id="loginBtn" name="loginBtn" type="submit" class="btn btn-success radius size-L">&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="footer">&copy;2021 Simple-Base 由<a target="_blank" href="http://www.h-ui.net/H-ui.admin.shtml">H-ui.admin</a>强力驱动</div>
</#macro>

<#assign css>
<link href="/lib/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.footer a {
    color: #CC0000;
    font-weight: 600;
    text-decoration: none;
}
</style>
</#assign>

<#assign js>
<script type="text/javascript">
    $(function(){
        $('#kanbuq').on('click',function(e){
            let captchaUrl = $(this).siblings('img').prop('src').split('?')[0];
            $(this).siblings('img').prop('src', captchaUrl+'?t='+new Date().getTime());
        });

        $.validator.setDefaults({
            submitHandler: function (form) {
                $.ajax({
                    url:$(form).prop('action'),
                    type:'POST',
                    dataType:'json',
                    data:$(form).serialize(),
                    success:function(json){
                        if(json.errno == 0){
                            location.href = '/';
                        }
                    }
                });
            }
        });
        $('#loginBtn').parents('form').validate({
            rules: {
              username: {
                required: true,
                minlength: 5,
              },
              password: {
                required: true,
                minlength: 5
              },
              verifyCode: {
                required: true
              },
            },
            messages: {
              username: {
                required: "请输入您的账号",
                minlength: "请输入一个至少5个字符的账号"
              },
              password: {
                required: "请输入您的密码",
                minlength: "请输入一个至少5个字符的密码"
              },
              verifyCode: {
                required: '请输入右侧公式计算结果'
              }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
              error.appendTo(element.parent());
            }
            /*,
            errorElement: 'span',
            errorPlacement: function (error, element) {
              error.addClass('invalid-feedback');
              element.closest('.input-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
              $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
              $(element).removeClass('is-invalid');
            }*/
        });
    });
</script>
</#assign>
<#include "common/layout.html"/>